<template>
  <div class="goodsList">
    <div class="goods-top">
      <scroll-view class="scroll-content tabSelect" :scroll-x="true">
        <div
          class="item"
          v-for="(item, index) in tabsList"
          :key="`select${index}`"
          @tap="changeSelect(index)"
        >
          <div class="box" :class="{ select: index === select }">
            <span class="text">{{ item.marketingName }}</span>
            <span class="tips">{{ item.marketingTip }}</span>
          </div>
        </div>
      </scroll-view>
    </div>
    <div
      class="index-goodsList-content"
      :style="{
        'min-height': isChangeType && goodsList.length === 0 ? '100vh' : 'auto',
      }"
    >
      <GoodsList :data.sync="goodsList" :goodsData.sync="goodsData" />
    </div>
  </div>
</template>
<script>
import GoodsList from "../../../components/goodsList.vue";
export default {
  components: { GoodsList },
  data() {
    return {
      tabsList: [
        {
          id: 49,
          marketingName: "精选推荐",
          marketingTip: "爆款好物",
          position: 4,
          marketingGoodsList: null,
          url: null,
        },
        {
          id: 74,
          marketingName: "精品手机",
          marketingTip: "品牌旗舰",
          position: 4,
          marketingGoodsList: null,
          url: null,
        },
        {
          id: 50,
          marketingName: "休闲娱乐",
          marketingTip: "娱乐影音",
          position: 4,
          marketingGoodsList: null,
          url: null,
        },
        {
          id: 52,
          marketingName: "设计入门",
          marketingTip: "绘图设计",
          position: 4,
          marketingGoodsList: null,
          url: null,
        },
        {
          id: 53,
          marketingName: "轻享办公",
          marketingTip: "极速发货",
          position: 4,
          marketingGoodsList: null,
          url: null,
        },
        {
          id: 61,
          marketingName: "游戏娱乐",
          marketingTip: "主流游戏",
          position: 4,
          marketingGoodsList: null,
          url: null,
        },
      ],
      goodsList: [],
      select: 0,
      isChangeType: false,
      goodsData: {
        page: 1,
        size: 10,
        finish: false,
        loading: false,
      },
    };
  },
  mounted() {
    this.getTabs();
  },
  computed: {
    marketingId() {
      return this.tabsList.length ? this.tabsList[this.select].id : "";
    },
  },
  methods: {
    changeSelect(index) {
      this.isChangeType = true;
      this.select = index;
      this.goodsData.page = 1;
      this.goodsData.finish = false;
      this.goodsList = [];
      this.getData();
    },
    getTabs() {
      this.$api.getMarketingList({ position: 4 }).then((data) => {
        this.tabsList = data;
        this.getData();
      });
    },
    getData() {
      try {
        this.goodsData.loading = true;
        const params = {
          marketingId: this.marketingId,
          pageNumber: this.goodsData.page,
          pageSize: this.goodsData.size,
          // position: 4
        };
        this.$api
          .getMarketGoodsList(params)
          .then((data) => {
            this.goodsData.loading = false;
            this.isGetData = false;
            this.goodsList.push(...data);
            if (data.length < this.goodsData.size) {
              this.goodsData.finish = true;
            } else {
              this.goodsData.finish = false;
            }
            // if (this.isChangeType) { // 栏目的首次加载
            //   // console.log(this.$refs.goodsList)
            //   this.$taro.createSelectorQuery().select('.tabSelect')
            //     .boundingClientRect().selectViewport().scrollOffset()
            //     .exec(res => {
            //       this.$taro.createSelectorQuery().select('.search-content')
            //       .boundingClientRect().exec(search => {
            //         console.log(res, search[0].height)
            //         this.$taro.pageScrollTo({ scrollTop: res[1].scrollTop - res[0].height - search[0].height - this.$utils.convertRPXToPx(36) })
            //       })
            //       // search-content

            //     })
            // }
          })
          .catch(() => {
            this.isGetData = false;
            this.goodsData.loading = false;
          });
      } catch (err) {
        console.log(err);
      }
    },
    getMoreData() {
      console.log(
        this.isGetData,
        this.goodsData.finish,
        this.goodsData.loading
      );
      if (this.isGetData || this.goodsData.finish || this.goodsData.loading) {
        return;
      }
      this.isGetData = true;
      this.goodsData.page += 1;
      this.getData();
    },
  },
};
</script>
<style lang="scss">
.goodsList {
  width: 100%;
  margin-top: 8px;
  .goods-top {
    width: 100%;
    height: 57px;
    margin: 12px 0;
    padding-left: 12px;
    background-color: #fff;
  }
  .tabSelect {
    width: 100%;
    height: 57px;
    border-radius: 10px;
    background: linear-gradient(
      180deg,
      #157afe 0%,
      #157afe 0%,
      #4f92ed 100%,
      #4f92ed 100%
    );
    // margin: 12px 0;
    // margin-left: 12px;
    position: -webkit-sticky;
    position: sticky;
    // top: 50.5px;
    z-index: 11;
    .item {
      margin-right: 25px;
      height: 100%;
      // width: 62px;
      &:first-child {
        margin-left: 13px;
      }
      &:last-child {
        margin-right: 13px;
      }
      .box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &.select {
          width: 88px;
          height: 57px;
          border-radius: 10px 10px 0px 0px;
          background: #f6f6f6;
          .text {
            color: #157afe;
          }
          .tips {
            // background: #0096ff;
            color: #3d3d3d;
          }
        }
        .text {
          font-size: 14px;
          line-height: 18px;
          color: #fff;
          margin-top: 7px;
          // transition: color 0.3s;
        }
        .tips {
          border-radius: 9px;
          padding: 0 7px;
          height: 18px;
          text-align: center;
          margin-top: 4px;
          color: #f6f6f6;
          font-size: 12px;
          line-height: 16px;
          // transition: color 0.3s, background 0.3s;
        }
      }
    }
  }
}
</style>
